import React, { useState, useEffect, useContext } from 'react';
import { Popover, Button, Space } from 'antd';
import { UNSELECT_NODE } from '../actions/DESGIN'


import useAppContext from '../hooks/useAppContext';

const WEditor = (props) => {

    const { rootState, dispatch } = useAppContext();

    const { children, code,onPropsEditClick,onPropsDeleteClick, ...others } = props;
    const edit = (rootState.selectedCode == code);

    return edit ? <Popover visible={edit}
        placement="bottomRight"
        content={<Space><Button shape="round" onClick={() => {
            //取消选择
            dispatch({
                type: UNSELECT_NODE
            });
        }} >取消选择</Button>
            <Button type="primary" shape="round" onClick={() => {
                //点击编辑属性
                if(onPropsEditClick){
                    onPropsEditClick();
                }             

            }} >编辑属性</Button>
            <Button type="primary" shape="round" onClick={() => {
                //点击删除元素
                if(onPropsDeleteClick){
                    onPropsDeleteClick();
                }             

            }} >删除元素</Button>
        </Space>}
        {...others}>
        {children}
    </Popover> : <>
            {children}
        </>

}

export default WEditor;